<template>
  <div id="app">
    <div style="width: 200px;height: 100px;margin-left: 150px;margin-top: 50px;position: absolute;background:  	#FFA54F;">
      <p style="margin-left: 53px;margin-top: 34px">保护天数:135</p>
    </div>
    <div style="width: 200px;height: 100px;margin-left: 700px;margin-top: 50px;position: absolute;background:  	#FFA07A">
      <p style="margin-left: 53px;margin-top: 34px">保护次数:5</p>
    </div>
    <div style="width: 200px;height: 100px;margin-left: 1200px;margin-top: 50px;position: absolute;background: #EEE8CD">
      <p style="margin-left: 53px;margin-top: 34px">预约次数:300</p>
    </div>
    <div id="barGraph" style="width: 630px;height: 500px;border: cyan 1px solid;position: absolute;right:200px;top: 300px;">bbb</div>
    <div id="pieGraph" style="width: 630px;height: 500px;border: cyan 1px solid;position: absolute;left:100px;top: 300px;">aaa</div>
  </div>
</template>
<script>
  let echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入柱状图
  require('echarts/lib/chart/pie');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title')
  export default {
    name: "WelcomePage",
    data () {
      return {  }
    },
    mounted(){
      this.drawPie();
      this.drawBar();
    },
    methods:{
      drawBar(){
        // 基于dom，初始化echarts实例
        let barGraph = echarts.init(document.getElementById('barGraph'));
        // 绘制图表
        barGraph.setOption({
          title: {
            text: '预约量走势年度对比',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          legend: {
            left: 'center',
            data: ['本年', '上年'],
            bottom:0
          },
          xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          grid: {
            left: '1%',
            right: '2%',
            bottom: '8%',
            containLabel: true
          },
          yAxis: {
            type: 'category',
            name: 'y',
            splitLine: {show: true},
            data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
          },
          series: [
            {
              name: '本年',
              type: 'line',
              data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
            },
            {
              name: '上年',
              type: 'line',
              data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
            },
          ]
        })
      },
      drawPie(){
        let pieGraph = echarts.init(document.getElementById('pieGraph'));
        pieGraph.setOption({
          title : {
            text: '预约种类',
            subtext: '纯属虚构',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['神经内科','内分泌科','呼吸内科','心血管内科','消化内科']
          },
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                {value:335, name:'神经内科'},
                {value:310, name:'内分泌科'},
                {value:234, name:'呼吸内科'},
                {value:135, name:'心血管内科'},
                {value:1548, name:'消化内科'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script>
<style scoped>

</style>

